<template>
  <div>
    <h1>Experiment 3——外卖平台</h1>
    <div>
      <!-- 基于名称的路由，等效于/experiment3/foods -->
      <router-link :to="{ name: 'foods' }" style="text-decoration: none">美食</router-link>
      |
      <router-link to="/experiment3/location" style="text-decoration: none">本地</router-link>
      |
      <a href="" @click.prevent style="text-decoration: none">跑腿</a>
    </div>
    <p>
      <router-link to="/experiment3/orders" style="text-decoration: none" class="order">
        订单：{{ cost }}
      </router-link>
    </p>
    <router-view style="padding: 5px" />
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { exp3Store } from './store'

//exp3Store 是一个全局状态创建函数，它返回一个响应式对象
//调用 exp3Store() 时，实际上是在执行这个函数，并返回它创建的全局状态对象
//如果只是写 store = exp3Store 而不是 store = exp3Store()，那么 store 将会指向 exp3Store 函数本身，而不是函数返回的全局状态对象
//这意味着不能通过 store 访问 shopListS、shopCacheS 或 ordersS，因为这些引用是函数返回对象的一部分，而不是函数本身的一部分
const store = exp3Store() //注意这里exp3Store后面要加()
const orders = store.ordersS
// 计算orders中的价格,计算属性
const cost = computed(
  () =>
    // reduce(callback, index)类似递归函数；callback函数，pre，前一次结果；cur，当前遍历对象
    orders.value.reduce((pre, cur) => pre + cur.quantity * (cur.item.price ?? 0), 0).toFixed(2)
  //将总价格四舍五入到两位小数，并返回一个字符串
)
</script>
<style scoped>
.order {
  display: inline-black;
  background: orange;
  border-radius: 5px;
  padding: 2px;
}
</style>
